<template>
  <div class="agentCenter">
    <div class="remarksMsg" v-if="remarksMsg">
      <div class="remarksMsgList">
        <p>备注信息 <span @click="remarksMsgShow">关闭</span></p>
        <p>请输入代理线备注</p>
        <p>备注能有助于您记录该代理的信息</p>
        <input type="text" v-model="agentName" placeholder="请输入代理备注信息">
        <p @click="creatAgentLink">确认提交</p>
      </div>
    </div>
    <div class="agentCenterTitle">
      <ul class="clearFiex">
        <li>设置账户类型</li>
        <li @click="toggle('iNameVip')"><i :class="{'on':iNameVip}"></i>会员</li>
        <li @click="toggle('iName')"><i :class="{'on':iName}"></i>代理</li>
        <li>设置开户返点
          <input type="text" v-model="rebateValue" maxlength='3' @blur="rebateBolur">
          <span>%</span>
        </li>
        <li class="creditTabsRight">
          <div class="cPauseSliderVue cPauseCls displayFlex">
            <section class="slider">{{smallVal}}%</section>
            <section>
              <Slider class="agentSlider" v-model="value1" :min="smallVal" :max="bigValCopy" :tip-format="format"
                      :show-tip="'always'"></Slider>
            </section>
            <section class="slider">{{bigVal/2}}%</section>
          </div>
        </li>
        <li @click="remarksMsgShow">生成开户链接</li>
      </ul>
    </div>
    <div class="agentCenterTab">
      <ul>
        <li class="ageCenTabItem displayFlex">
          <span>序号</span>
          <span>注册人数 (人)</span>
          <span>返点</span>
          <span>类型</span>
          <span>推广链接</span>
          <span>创建时间</span>
          <span>备注</span>
        </li>
        <li class="ageCenTabItem displayFlex" v-for="(linkItem,index) in openAccountData">
          <span>{{index+1+(currentPage-1)*perPageNum}}</span>
          <span>{{linkItem.totalMembers}}</span>
          <span>{{linkItem.rebate}}</span>
          <span>{{linkItem.type=='0'?'会员':'代理'}}</span>
          <span>
              <input class="one-txt-cut" type="text" disabled v-model="linkItem.url" :title="linkItem.url">
              <span
                  v-clipboard:copy="linkItem.url"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
              ><i></i>复制链接</span>
              <span @mouseover="creatQrcode(linkItem.url,index,1)" @mouseleave="qrcodeLeave(1)">
                <i></i>二维码
                <div class="ermImg">
                 <canvas class="canvas"></canvas>
                </div>
              </span>
              <span @mouseover="creatQrcode(linkItem.downUrl,index,2)" @mouseleave="qrcodeLeave(2)" v-if="linkItem.downUrl">
                <i></i>app下载
                <div class="appDownErm">
                 <canvas class="appDownCanvas"></canvas>
                </div>
              </span>
            </span>
          <span class="one-txt-cut" :title="_Util.formatDateTime(linkItem.createTime,1)">{{_Util.formatDateTime(linkItem.createTime,1)}}</span>
          <span class="one-txt-cut" :title="linkItem.name">{{linkItem.name}}</span>
        </li>
      </ul>
    </div>
    <div class="pageDevice" v-if="openAccountData.length>0">
      <Page :total="totalPage" :pageSize='perPageNum' :current="currentPage" :showTotal='true'
            @on-change="changeCurrentPage"></Page>
    </div>
  </div>
</template>

<script>
  import './agentCenter.scss';
  import {mapState} from 'vuex';
  
  export default {
    data() {
      return {
        value1: 0,
        smallVal: 0,
        bigVal: 16,
        iName: true,
        iNameVip: false,
        remarksMsg: false,
        bigValCopy: 16,
        openAccountData: [],
        currentPage: 1,
        perPageNum: 15,
        totalPage: 0,//总页数
        agentName: '',//代理线名称（代理备注信息）
        agentType: 0,//代理类型
        rebateValue: 0,//代理返点
        stationAgentType: 1,//代理站点模式
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.mutations.userInformation, //登录状态
      })
    },
    mounted() {
      this.init();
    },
    activated() {
      this.init();
    },
    deactivated() {
    },
    methods: {
      init() {
        this.initData();
        this.getStationType();
        this.getAgentLinkList();
      },
      initData() {
        this.currentPage = 1;
        this.agentType = 0;
        this.iName = false;
        this.iNameVip = true;
        this.remarksMsg = false;
        this.bigVal = this.userInfo.memberInfo ? this.userInfo.memberInfo.rebate * 2 : 16;
        this.bigValCopy = this.userInfo.memberInfo ? this.userInfo.memberInfo.rebate * 2 : 16;
        this.agentName = '';
        this.value1 = 0;
      },
      //获取代理链接列表
      getAgentLinkList() {
        let that = this;
        let params = {
          pageSize: that.perPageNum || 15,
          pageNum: that.currentPage,
        };
        that._Util.post(that, that._Api.POST_QUERY_AGENT_LINK, params, (data) => {
          that.openAccountData = data.result || [];
          that.totalPage = data.total || 0;
        });
      },
      //获取代理站点模式
      getStationType() {
        let that = this;
        that._Util.post(that, that._Api.POST_STATION_AGENT_TYPE, {}, (data) => {
          that.stationAgentType = data;
        })
      },
      //返点输入框失去焦点
      rebateBolur() {
        if (this.rebateValue == '') {
          this.rebateValue = '0';
        }
      },
      format(val) {
        this.value1 = val;
        return parseInt(this.value1) / 2 + '%';
      },
      toggle(tag) {
        if (tag === 'iName') {
          if (this.stationAgentType == '1') return false;
          this.iNameVip = false;
          this.agentType = 1;
          this.iName = true;
        } else {
          this.agentType = 0;
          this.iNameVip = true;
          this.iName = false;
        }
      },
      //生成二维码
      creatQrcode(path, index,num) {
        let canvas = null;
        if(num=='2'){
          $(".appDownErm").eq(index).show();
          canvas = $(".appDownCanvas").eq(index)[0];
        }else{
          $(".ermImg").eq(index).show();
          canvas = $(".canvas").eq(index)[0];
        }
        this._QRCode.toCanvas(canvas, path, function (error) {
          if (error) console.error(error)
        })
      },
      //鼠标离开二维码
      qrcodeLeave(num) {
        if(num=='2'){
          $(".appDownErm").hide();
        }else{
          $(".ermImg").hide();
        }
        
      },
      //复制开户链接
      onCopy: function (e) {
        this._Util.showAlert('链接复制成功');
      },
      //复制出错
      onError: function (e) {
        this._Util.showAlert('链接复制失败');
      },
      changeCurrentPage(val) {
        this.currentPage = val;
        this.getAgentLinkList();
      },
      //显示创建链接提示框
      remarksMsgShow() {
        this.remarksMsg = !this.remarksMsg;
      },
      //创建代理链接
      creatAgentLink() {
        let that = this;
        let params = {
          name: that.agentName || '',
          rebate: that.value1 / 2 || '0',
          type: that.agentType || '0',
        };
        that._Util.post(that, that._Api.POST_CREAT_AGENT_LINK, params, (data) => {
//        that.remarksMsg = false;
          that.initData();
          that.getAgentLinkList();
        }, '', 'post')
      },
      inputValue1() {
        if (this.$refs.input1.value > this.bigVal) {
          this.$refs.input1.value = this.bigVal;
        }
        if (this.$refs.input1.value < this.smallVal) {
          this.$refs.input1.value = this.smallVal;
        }
        let input1Val = this.$refs.input1.value.toString().split('');
      },
      progressStep(v, a, b) {
        let inputValue2 = Number(v);
        if (inputValue2 >= parseInt(this.bigVal)) {
          inputValue2 = Number(this.bigVal)
        }
        if (inputValue2 <= parseInt(this.smallVal)) {
          inputValue2 = Number(this.smallVal)
        }
        if (inputValue2 > 0) {
          let cc = parseInt($('.ivu-slider').width()) / (parseInt(this.bigVal) * 2 ) * (Number(v) / 0.5);
          if (parseInt(cc) > parseInt($('.ivu-slider').width())) {
            cc = parseInt($('.ivu-slider').width());
          }
          $('.ivu-slider-bar').css({'width': cc})
          $('.ivu-slider-button-wrap').css({'left': cc})
          $('.ivu-tooltip-popper').html(v + '%')
        }
      },
    },
    components: {},
    watch: {
      'bigVal'() {
        this.bigValCopy = parseInt(this.bigVal);
      },
      'rebateValue'(val) {
        this.rebateValue = val.replace(/[^0-9.]/g, '');
        if (this.rebateValue == '0' || this.rebateValue == '00' || this.rebateValue == '000') {
          this.rebateValue = '0';
        } else {
          if (this.rebateValue * 2 > this.bigVal) {
            this.rebateValue = '' + this.bigVal / 2;
          }
          if (this.rebateValue * 2 < this.smallVal) {
            this.rebateValue = '' + this.smallVal / 2;
          }
        }
        this.value1 = this.rebateValue * 2;
      },
      'value1'(val) {
        this.rebateValue = '' + val / 2;
      },
      'userInfo'() {
        this.initData();
      }
    }
  }
</script>

<style lang="css" rel="styleheet/css" scoped>
  .ivu-tooltip-popper:hover {
    /*display: block !important;*/
  }
  
  .cPauseSliderVue {
    position: relative;
    overflow: visible;
  }
  
  .cPauseSliderVue section:nth-child(1),
  .cPauseSliderVue section:nth-child(3) {
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
    color: #36464B;
    background: none;
    border-radius: 0px;
  }
  
  .cPauseSliderVue section:nth-child(3) {
    left: auto;
    right: 0;
  }
  
  .sliderOdds.creditSliderOdds {
    text-align: center;
    height: 20px;
    line-height: 20px;
  }
</style>
